<template>
  <div class>
    <div class="imgBox">
      <!-- {{urlStr}} -->
      <img class="img" id="target" :src="urlStr" alt />
    </div>
    <div class="footer">
      <el-button type="info" icon="el-icon-zoom-in" size="mini" circle @click="zoomIn"></el-button>
      <el-button type="info" icon="el-icon-refresh-left" size="mini" circle @click="rotatLeft"></el-button>
      <el-button type="info" icon="el-icon-arrow-left" size="mini" circle @click="previousImg"></el-button>
      <el-button type="info" size="mini" circle @click="reduction">1:1</el-button>
      <el-button type="info" icon="el-icon-arrow-right" size="mini" circle @click="nextImg"></el-button>
      <el-button type="info" icon="el-icon-refresh-right" size="mini" circle @click="rotatRight"></el-button>
      <el-button type="info" icon="el-icon-zoom-out" size="mini" circle @click="zoomOut"></el-button>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    // index: {
    //   type: String,
    //   default: "0"
    // },
    list: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      el: null,
      index: "0",
      deg: 0,
      zoom: 1
    };
  },
  computed: {
    urlStr: function() {
      return this.list[this.index].src;
    }
  },
  mounted() {
    this.el = document.getElementById("target");
    window.addEventListener("mousewheel", this.handleScroll, true);
  },
  methods: {
    handleScroll(e) {
      // 页面滚动距顶部距离
      let direction = e.deltaY;
      if (direction < 0) {
        // console.log('up')
        this.zoomIn();
      } else {
        // console.log('down')
        this.zoomOut();
      }
    },
    reduction() {
      this.deg = 0;
      this.zoom = 1;
      this.el.style.transform = `rotate(${this.deg}deg) scale(${this.zoom})`;
    },
    nextImg() {
        this.reduction()
      if (this.index == this.list.length - 1) {
        this.index = 0;
      } else {
        this.index++;
      }
    },
    previousImg() {
      this.reduction()
      if (this.index == 0) {
        this.index = this.list.length - 1 + "";
      } else {
        this.index--;
      }
    },
    rotatLeft() {
      this.deg -= 90;
      this.el.style.transform = `rotate(${this.deg}deg) scale(${this.zoom})`;
    },
    rotatRight() {
      this.deg += 90;
      this.el.style.transform = `rotate(${this.deg}deg) scale(${this.zoom})`;
    },
    zoomIn() {
      this.zoom += 0.1;
      this.el.style.transform = `rotate(${this.deg}deg) scale(${this.zoom})`;
    },
    zoomOut() {
      this.zoom -= 0.1;
      this.el.style.transform = `rotate(${this.deg}deg) scale(${this.zoom})`;
    }
  },
  created() {}
};
</script>
<style lang='scss' scoped>
.imgBox {
  border: 1px solid #ccc;
  position: relative;
  overflow: auto;
  background-color: #f1f1f1;
  height: 60vh;
  .img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
}
.footer {
  text-align: center;
  line-height: 60px;
  height: 60px;
  // background-color: rgba(0,0,0,.3);
}
</style>